<template>
  <div class="status">
    <template v-if="goods.isWillDelist == 1">
      <el-tag type="danger" v-if="goods.delistType == 2" size="small">停产</el-tag>
      <el-tag type="warning" v-if="goods.delistType == 1">暂时下架</el-tag>
    </template>
    <el-tag type="primary" size="small" v-else-if="goods.businessProductStatus == 3">上架</el-tag>
    <el-tag type="primary" size="small" v-else-if="goods.businessProductStatus == 1">预发布</el-tag>
    <el-tag type="danger" size="small" v-if="goods.changeId">价格变更</el-tag>
    <el-tag type="info" size="small" v-else-if="goods.businessProductStatus == 5">下架</el-tag>
    <el-tag type="info" size="small" v-else-if="goods.businessProductStatus == 7">即将删除</el-tag>
    <el-tag type="danger" size="small" v-else-if="goods.businessProductStatus == 6">已驳回</el-tag>
    <el-tag type="primary" size="small" v-if="goods.changeId" @click="viewDetails(goods)" style="cursor: pointer"
      >变更明细</el-tag
    >
    <div class="detail" v-if="goods.isWillDelist == 1 || goods.businessProductStatus == 7 || goods.changeId">
      <div v-if="goods.isWillDelist == 1 || goods.businessProductStatus == 7">
        <div class="day">{{ getTime(goods.isWillDelist == 1 ? goods.delistTime : goods.delTime).day }}天</div>
        <el-countdown
          :value="getTime(goods.isWillDelist == 1 ? goods.delistTime : goods.delTime).timestamp"
          :value-style="countDownStyle"
          format="HH : mm : ss"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps(["goods"]);
const emit = defineEmits(["openAlter"]);

/**
 * 根据时间返回时间戳和天数
 */
const getTime = time => {
  const now = new Date();
  const futureDate = new Date(time).getTime();
  const diff = futureDate - now;
  const day = Math.floor(diff / 1000 / 60 / 60 / 24);
  const integer = day * 24 * 60 * 60 * 1000;
  const timestamp = new Date(futureDate > integer ? futureDate - integer : futureDate).getTime();
  return {
    day,
    timestamp
  };
};
/**
 * 倒计时样式
 */
const countDownStyle = {
  "font-size": "14px",
  "text-align": "center",
  color: "#86909C",
  background:
    "linear-gradient(to right, transparent 0,#F6F8FA 0% 26%,transparent 26% 37%,#F6F8FA 37% 64%,transparent 64% 74%,#F6F8FA 74% 100%)",
  "margin-top": "16px"
};
const viewDetails = goods => {
  emit("openAlter", goods);
};
</script>

<style lang="scss" scoped>
.status {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8px;

  .el-tag {
    justify-self: center;
  }

  .detail {
    display: flex;
    justify-content: center;
    width: 100%;

    .day {
      width: 100%;
      background: #f6f8fa;
      text-align: center;
      margin: 0 auto;
      border-radius: 4px;
      font-size: 12px;
      height: 20px;
      line-height: 20px;
    }
  }
}
</style>
